<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link	href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css"	rel="stylesheet">
<link   href="${pageContext.request.contextPath}/themes/icon.css"	rel="stylesheet">
<script src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<script	src="${pageContext.request.contextPath}/js/jquery.backstretch.js"></script>
</head>
<script type="text/javascript">
  $(function() {
	  
	   //设置全屏背景图片
		 
		$.backstretch("${pageContext.request.contextPath}/img/backgrounds/3.jpg")
		
	   
		//配置增加员工表单
		$("#addEmp").form({
	
			url:'${pageContext.request.contextPath}/addEmployee?role_id=2',
			success:function(data){
				if(data=="1"){
		        	$("#addEmp").form('clear');
		        	$.messager.confirm('确认','添加成功',function(r){    
					    if (r){    
					        location.href = "${pageContext.request.contextPath}/employee/addemployee.jsp";
					    }    
					});
		        }
			}
		 });
			
	   //配置自定义验证框
	   $.extend($.fn.validatebox.defaults.rules, {    
		   mobile: {// 验证手机号码
               validator: function (value) {
                   return /^(13|15|18|14)\d{9}$/i.test(value);
               },
               message: '手机号码格式不正确'
		   },
		   age: {// 验证年龄
               validator: function (value) {
                   return /^\d{2}$/i.test(value);
               },
               message: '年龄格式不正确'
		   },
		   number:{
			   validator: function (value) {
				   var error=false;
				  if(!/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{2,8}$/.test(value)){
					  $.fn.validatebox.defaults.rules.number.message ="编号格式不正确";
					  return false;
				  }   
				   //验证员工编号是否存在
	               $("#span").text("");
				   var e_number = $(this).val();
				   var exist =  $.ajax({
						type : 'post',
						url : '${pageContext.request.contextPath}/validatee_number',
						data : {
							'e_number' : e_number
						},
						async:false,
						//定义返回的数据类型
					/*	dataType : "tex",
						//请求成功时调用的函数
						success : function(data) {
							$("#span").text(data.msg);
						}     */
					}).responseText;
				   if(exist=="存在"){
					   $.fn.validatebox.defaults.rules.number.message ="该员工编号已存在";
						  return false;
				   }
				   return true;
			   },
			   message: ''
		   },
		   password: {// 验证密码
               validator: function (value) {
                   return /^\S{2,8}$/i.test(value);
               },
               message: '密码格式不正确'
		   },
		   address: {// 验证地址
               validator: function (value) {
                   return /^\S{2,30}$/i.test(value);
               },
               message: '地址太少或超出范围'
		   },
		  description : {// 验证描述
              validator: function (value) {
                  return /^\S{2,30}$/i.test(value);
              },
              message: '描述太少或超出范围'
		   }
		}); 
			
	   
	   
	   //配置下拉框
	   $("#deptType").combobox({
		   editable : false
	   });
		
   });
	//配置添加表单提交事件
	function addForm() {
		$("#addEmp").form('submit');
	}
	//配置取消添加表单内容事件
	function cancleForm() {
		$("#addEmp").form('clear');
	}
	
</script>
<body>

	<!-- 添加的面板 -->
	<div style="margin-left: 170px">
		<div id="addEmployee" class="easyui-panel" title="添加员工信息"
			style="width: 80%; height: 570px; background-color: #D1EEEE;"
			data-options="modal:true">
			<form id="addEmp" method="post" style="text-align: center;">
				<div style="margin-bottom: 15px">
					<span>员工编号:</span><input class="easyui-textbox" name="e_number" id="e_number"
						style="width: 20%" data-options="iconCls:'icon-sum',required: true,validType:'number',missingMessage:'员工编号必填且由2~8位字母数字组成'">
						<p id="span"style="font-size: 10px; color: red;"></p> 
				</div>
				<div style="margin-bottom: 15px">
					<span>员工密码:</span><input class="easyui-textbox" name="e_password"
						style="width: 20%" data-options="iconCls:'icon-lock',required: true,validType:'password',missingMessage:'员工密码必填且由2~8位字符组成'" type="password">
				</div>
				<div style="margin-bottom: 15px">
					<span>员工姓名:</span><input class="easyui-textbox" name="e_name"
						style="width: 20%" data-options="iconCls:'icon-man',required: true,missingMessage:'员工姓名请必须填写'">
				</div>
				<div style="margin-bottom: 15px">
					<span>员工性别:</span>
					 男:<input  name="e_sex" type="radio" value="男" style="width: 6%" checked="checked" >
					 女:<input  name="e_sex" type="radio" value="女" style="width: 6%" >
				</div>
				<div style="margin-bottom: 15px">
					<span>员工年龄:</span><input class="easyui-textbox" name="e_age"
						style="width: 20%" data-options="required: true,validType:'age',missingMessage:'员工年龄请必须填写'">
				</div>
				<div style="margin-bottom: 15px">
					<span>员工电话:</span><input class="easyui-textbox" name="e_tel" id="e_tel"
						style="width: 20%" data-options="iconCls:'icon-print',required: true,validType:'mobile',missingMessage:'员工电话请必须填写'">
				</div>
				<div style="margin-bottom: 15px">
					<span>员工邮箱:</span><input class="easyui-textbox" name="e_email"
						style="width: 20%" data-options="iconCls:'icon-mini-add',required:true,validType:'email',missingMessage:'员工邮箱请必须填写'">
				</div>
				<div style="margin-bottom: 15px">
					<span>员工地址:</span><input class="easyui-textbox" name="e_address"
						style="width: 20%" data-options="iconCls:'icon-tip',required: true,validType:'address',missingMessage:'员工地址请必须填写'">
				</div>
				<div style="margin-bottom: 15px">
					<span>员工生日:</span><input  class="easyui-datebox" name="e_birthday"
						style="width: 20%" data-options="editable:false">
				</div>
				<div style="margin-bottom: 15px">
					<span>进入时间:</span><input  class="easyui-datebox" name="e_entrydate"
						style="width: 20%" data-options="editable:false">
				</div>
				<div style="margin-bottom: 15px">
					<span>员工描述:</span><input class="easyui-textbox" name="e_description"
					    style="width: 20%" data-options="required: true,validType:'description',missingMessage:'员工描述请必须填写'">
				</div>
				<div style="margin-bottom: 15px">
					<span>所属部门:</span>
					<!--<input class="easyui-textbox" name="dept_id"
						style="width: 10%;" data-options="">
					<input id="cc" class="easyui-combobox" name="dept"   style="width: 10%;"
                      data-options="valueField:'id',textField:'text',url:'get_data.php'" /> -->
                      <select id="deptType" class="easyui-combobox" name="dept_id" style="width:20%;">   
					             <c:forEach items="${dept}" var="deptType">
					                   <option id="types" value="${deptType.dept_id}" readonly="readonly">${deptType.dept_name}</option>   
					              </c:forEach>   
					   </select> 
				</div>
		
			</form>
			<div style="text-align: center; padding: 5px">
				<a href="javascript:void(0)" class="easyui-linkbutton"
					onclick="addForm()" style="width: 80px">提交</a> <a
					href="javascript:void(0)" class="easyui-linkbutton"
					onclick="cancleForm()" style="width: 80px">取消</a>
			</div>
		</div>
	</div>  
  
</body>
</html>